In our first meeting we thought of ideas that we could use for the escape room. Some of the ideas we came up with were a pirate theme, a desert temple theme, and an underwater temple theme. Out of all the themes we discussed we decided to settle on creating a pirate themed escape room. Once we had a theme, we started to put together images of what style we wanted the escape room to be and what the characters might look like. Moodboards are good for this as data observed by using moodboards as a visual expression of ideas, allow for easier expression of an aesthetic vision (Endrissat, Islam and Noppeney, 2016).

We used a word document to start planning the story and direction the player would take to complete the escape room. Planning is a big part of the game making process, without it there would be no direction. It helps bring life to the vision of a scene, what happens first, next, and last, the audio and transitions (Lambert, 2010).

We decided on five different room plans: the treasure room, plumbing room, dining room, top deck, and water area. These would be paired with three screens: the main menu, the instruction menu, and the win screen. All the rooms would need to be completed in order to win the game.

We set ourselves one half of the escape room to do each, where we would have to use animation alongside ActionScript to bring the escape room to life. Linh will be creating the menus, treasure room, and top deck. I will be creating the plumbing room, dining room, and water area. We decided that we wanted the game to have cartoon style, even though more people prefer having a realistic environment (Anwar et al. 2018) we decided that wouldn't fit what we were trying to achieve.

First I needed to design what the plumbing room would look like which I did in Photoshop. This would allow me to use all the assets when imported into Animate to animate and use ActionScript. In this room, the player needs to rotate all the pipes in the correct direction to get to the next room.

In Animate I first seperated all the parts that would be moved or animated into MovieClips or buttons and then started creating the exiting animation because as soon as the player comes into this scene it will be stopped and once they complete the puzzle the scene will play.

Now I needed the pipes to rotate when they were clicked on. I did this using MouseClick Event Listeners which I used for each pipe that was on the scene which called a function called 'rotate90' which got the current target's rotation (the clicked pipe) and added 90 degrees onto it and also called the 'correctRotation' function which would be called each time a pipe was rotated to check if all the pipes were in the correct position.

If the player gets all the pipes in the right position then the code removes all the event listeners on the pipes, so the player can't carry on rotating them, and then plays the animation taking the player to the next scene. The player gets moved to the next scene using gotoAndStop or gotoAndPlay, depending on if I had an animation playing in the next scene.

I then wanted to make the pipes go in random directions when the room was entered so that it would be different each time they played the game. I accomplished that by getting the pipes current rotation and changing it's angle to a random angle stated in the 'Angles' array. This was looped for each pipe on the scene so they all got a random angle.

Starting the dining room, I designed what the room layout would be, where all the guards would go, and the route the player would have to take. In this room, the player will have to reach the other side of the room without being detected by any of the guards. If they do get seen, they get sent back to the beginning of this room.

First I created the character's movement script by adding event listeners for the arrow keys then detecting when an arrow key was pressed down and moving them in the respective direction, also rotating the character in that direction. I did this because the selection of animations can play a significant role in the quality of a performance by a character (Kallmann and Bekris, 2012). I also made a small animation for the character inside it's nested timeline where it moves it's arms back and forth by making it a MovieClip. This is activated when the player presses an arrow key with 'Character.play();'.

I then created the entering animation and exiting animation that would play when the player enters the room, and when the player hits the exit line when the complete the level.

Then I added borders to the scene so the player couldn't move the character out of bounds and made it so that if the character walked into one of the walls, it bounced them backwards. The script loops round all the walls each time the player moves to check if they have touched one. At the very beginning of the script I also made all the borders invisible so that the player can't see them.

Then I needed to add the guards and their sight into the scene. I did this by taking the character's image and just changing the head colour. I then created a triangle and made it a MovieClip and moved it's registration point to one of the corners so it can rotate around that point. I then made an animation inside the nested timeline where it rotates around that point. I put one of the sights on each of the guards and added a script that loops round all the guard sights, and if the player touches one of them it sends the character back to the start of the room. I also made it so that if the character touches any of the walls or guardsights, it stops the player from moving the character just whilst the character is being pushed back or moved to the beginning so that it doesn't disrupt the movement and potentially clip them out of bounds.

Once the player reaches the end of the room, they touch the exit line which removes all the event listeners and plays the exiting animation.

For the Water scene, I used Photoshop to design how it would look. I drew the barrels, shark fins, and the island the player would need to get to to win this scene, and the game. If they got hit by one of the sharks, they'd be sent back to the beginning of this scene, hitting a barrel would just knock the character backwards.

I then imported all the assets into Animate and created a character that looked like it was swimming. I used the same character movement script from the dining room except I changed the animation that would happen when the character moved. The arms and legs both move on the character to make it look like they're swimming. Again, I did this because the selection of animations can play a significant role in the quality of a performance by a character (Kallmann and Bekris, 2012).

The same script was used for the barrels to knock the character back, although it was changed a little bit because instead of there being barriers, the collision object is the barrel itself. I also added an animation to the barrels so they looked like they were bobbing up and down. I reduced the amount of sharks on the scene compared to the original design and also animated a path for each shark to take. Then the same script was used for the sharks as the guard sight's except changed because there were less sharks.

Once I had completed all the scenes I added mobile compatibility. Having mobile compatibility is great because it increases the player base and also adds the possibility for cross platform support where the player could play on one device and carry on playing on another. The first scene was already mobile compatible because it only involved touching the scene to register as a mouse click, the dining room and water area however required a D-Pad.

The D-Pad would allow mobile users to tap on the direction buttons to move the character in that direction.

I needed to create event listeners for each button, detecting when the button was pressed and released. I did this by calling a function for their respective direction whenever the button was pressed or released.

I then created variables that would get changed by those functions depending on whether the character should move or stop.

Then I had to create a check movement function to detect if the button had been pressed, in which case, move the character. All the code from the arrow keys function had to be replicated after that because each time a button or arrow key is pressed it loops round all the obstacles to check if any of the conditions had been met.

Once I had all the scenes completed, I added sound effects to make the game more immersive as good sound effects will add life and excitment, whereas drab ordinary sounds will drain what life there might be in the action (Thomas, Johnston and Thomas, 1995). To get these sound effects I went onto royalty free SFX websites like Soundjay and Freesound.

For the plumbing room I found ambient sound effects for a creaking boat (jimsim, 2017), dripping sounds (InspectorJ, 2016), and a click sound (waveplay., 2017) for when the player is rotating the pipes.

For the dining room I used the creaking boat and dripping sounds in addition to a footsteps (Soundjay.com, n.d) sound effect for when the character is moving.

Lastly for the water area, I used an ocean waves (Soundjay.com, n.d) sound effect, and a swimming (Robinhood76, 2015) sound effect for when the character was moving.

To implement these sound effects, I put them in a sound folder and referenced to them using a new sound URL request. This allowed me to assign that sound to a variable and allow me to play them individually.

To play a sound I used the variable name and '.play()'. The numbers inside the brackets make the music start at the very beginning, and loop 9999 times. Repeating the long sound effects would mean that the player would have to be on a scene for a very long time before the sound stopped as I couldn't find a way to make it loop indefinately and allowing me to stop it when the player finished a particular room.

Once the player has completed a room, before the script moves to the next scene it stops all the sound effects, otherwise they would carry on into the next room and I would have no control over them until they stopped after 9999 repeats.

Once both of us had completed all the scenes we had to combine them all together. This was fairly easy as we only had to copy the layers in each scene and paste them in the main .FLA file. We then duplicated a few of the transition scenes between the newly added scenes to make the transition between scenes less instant.

We used a few computers to make sure the animations ran on them, and all but the computer it was made on didn't run it. We managed to figure out that Advanced Layers was causing the issues, once we turned that off on all the scenes the animation worked correctly. I also exported the game for Android and installed it onto my phone. It worked for the most part, but you couldn't progress past some scenes and we couldn't figure out what the issues were because the game worked absolutely fine on our computers.

Here is the final result of our Escape Room:

Lambert, J. (2010). Digital Storytelling Cookbook. Berkeley, Calif: Digital Diner Press, p.31. Available at: https://wrd.as.uky.edu/sites/default/files/cookbook.pdf [Accessed 22 May 2020].

Endrissat, N., Islam, G. and Noppeney, C. (2016). Visual organizing: Balancing coordination and creative freedom via mood boards. Journal of Business Research, [online] 69(7), pp.2353-2362. Available at: https://doi.org/10.1016/j.jbusres.2015.10.004 [Accessed 22 May 2020].

Kallmann, M. and Bekris, K. (2012). Motion In Games. Berlin: Springer, p.5. Available at: https://books.google.co.uk/books?id=00S7BQAAQBAJ [Accessed 22 May 2020].

Anwar, R., Mahamood, M., Zain, D., Aziz, M., Hassan, O. and Abidin, S. (2018). Proceedings Of The Art And Design International Conference (Andic 2016). [S.l.]: SPRINGER, p.121. Available at: https://books.google.co.uk/books?id=eHJgDwAAQBAJ [Accessed 22 May 2020].

Thomas, F., Johnston, O. and Thomas, F. (1995). The illusion of life. New York: Hyperion, pp.298. Available at: https://books.google.co.uk/books?id=3lXFNAAACAAJ [Accessed 22 May 2020].

Soundjay.com. (n.d). Footsteps 4. [online] Available at: https://www.soundjay.com/footsteps/sounds/footsteps-4.mp3 [Accessed 18 May 2020].

InspectorJ. (2016). Dripping, Medium, A.Wav By Inspectorj. [online] Freesound. Available at: https://freesound.org/people/InspectorJ/sounds/343763/ [Accessed 18 May 2020].

jimsim 2017. Creaking Sailing Boat.Wav By Jimsim. [online] Freesound. Available at: https://freesound.org/people/jimsim/sounds/411087/ [Accessed 18 May 2020].

Soundjay.com. (n.d). Ocean Waves 1. [online] Available at: https://www.soundjay.com/nature/sounds/ocean-waves-1.mp3 [Accessed 18 May 2020].

Robinhood76. (2015). 05913 Swimming Loop.Wav By Robinhood76. [online] Freesound. Available at: https://freesound.org/people/Robinhood76/sounds/317067/ [Accessed 18 May 2020].

waveplay.. (2017). Short Click/Snap Perc By Waveplay.. [online] Freesound. Available at: https://freesound.org/people/waveplay./sounds/399934/ [Accessed 18 May 2020].